<template>
  <view>
    <base-container>
      <view style="padding: 20rpx">
        <uni-forms ref="form" :border="true" :model="form" label-width="150">
          <uni-forms-item label="申请人" name="ctPersonName">
            <uni-easyinput v-model="form.ctPersonName" :input-border="false"
                           :styles="{ disableColor: '#fff'}" disabled
                           placeholder="请输入" type="text"/>
          </uni-forms-item>
          <uni-forms-item label="手机号码" name="phone">
            <uni-easyinput v-model="form.phone" :input-border="false"
                           :styles="{ disableColor: '#fff'}"
                           disabled 
                           placeholder="请输入" type="text"/>
          </uni-forms-item>
          <uni-forms-item :rules="[{ required: true, errorMessage: '不能为空' }]" label="调休开始时间"
                          name="beginTime" required>
            <uni-datetime-picker v-model="form.beginTime" :border="false" :clear-icon="false" :hideSecond='true' 
                                 :input-border="false" type="datetime"/>
          </uni-forms-item>
          <uni-forms-item :rules="[{ required: true, errorMessage: '不能为空' }]" label="调休结束时间"
                          name="endTime" required>
            <uni-datetime-picker v-model="form.endTime" :border="false" :clear-icon="false" :hideSecond='true' :input-border="false" type="datetime"/>
          </uni-forms-item>
          <uni-forms-item :rules="[{ required: true, errorMessage: '不能为空' }]" label="调休原因" name="reason"
                          required>
            <uni-easyinput v-model="form.reason" :input-border="false" maxlength="400" placeholder="请输入"
                           type="textarea"/>
          </uni-forms-item>
        </uni-forms>
      </view>
	  <view class="flexmid" style="position: fixed; bottom: 50rpx; left: 0; width: 100%;">
	    <!-- <button class="main-btn" @click="submit()">确认出车</button> -->
	    <view class="main-btn middle" @click="submit()">提交</view>
	  </view>
     <!-- <template #actions>
        <button class="button" type="primary" @click="submit">提交</button>
      </template> -->
    </base-container>
  </view>
</template>

<script>
import {LeaveApi as Api} from "@/comms/api/leaveApi";
import {Msg, toBack} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      params: {},
      form: {},
      itemList: [],
      vehicleList: []
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({
      title: this.params.id ? '编辑调休' : "新增调休"
    });
  },
  mounted() {
    const {ctUserInfo: {mobile, name} = {}} = uni.getStorageSync("user_info") || {}
    this.form = {
      ...this.form, ...{
        ctPersonName: name,
        phone: mobile,
      }
    }
    this.loadDate(this.params)
  },
  methods: {
    async loadDate({id}) {
      Msg.loading(async close => {
        await Promise.all([])
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})
        }
        close?.();
      })
    },

    submit() {
      Msg.loading(close => {
        this.$refs.form.validate().then(async (valid) => {
          Api[this.form.id ? 'edit' : 'add'](this.convert())
              .then(res => {
                Msg.success("保存成功")
                setTimeout(() => toBack?.(), 1000)
              }).finally(() => close?.())
        }).catch(() => close?.())
      })
    },
    convert() {
      const {form: {vehicleId, typeId} = {}, vehicleList = [], itemList = []} = this;
      return {
        ...JSON.parse(JSON.stringify(this.form)),
        plateNumber: vehicleList.find(v => v.value == vehicleId)?.text,
        type: itemList.find(v => v.value == typeId)?.text,
      }
    }
  }
}
</script>

<style lang="scss">
.is-disabled {
  color: #666666 !important;
}
.main-btn{
	width: 700rpx;
	height: 100rpx;
	background: #1763fc;
	border-radius: 10rpx;
	font-size: 30rpx;
	color: #fff;
	margin: 0 auto;
}
</style>
